<template>
    <div :class="['compare__table', `compare--${ size }`]">
        <div class="row-header">
            <i :class="['title-icon', option.icon ]"></i>
            <span>{{ option.name }}</span>
        </div>
        <div class="row-content">
            <ul class="compare__row" v-for="(setting, index) in option.children" :key="index">
                <li class="compare__cell cell--title">
                    {{ setting.name }}
                </li>
                <li :class="['compare__cell cell--data', 
                    formatSortResult(dataInfo[setting.sign], cell)]"
                    v-for="(cell, cellIndex) in dataInfo[setting.sign].dataList" :key="cellIndex" :colkey="setting.sign">
                    {{ cell }}
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'RowCol',
        components: {},
        props: {
            option: {
                default: function() {
                    return {}
                }
            },
            dataInfo: {
                default: function() {
                    return {}
                }
            },
            size: {                             //  default
                type: String,
                default: 'default'
            }
        },  
        data() {
            return {
                
            }
        },
        computed: {
            
        },
        methods: {
            formatSortResult(result, cell) {
                const { sort, min, max } = result

                if(!sort || (min === max)) return
              
                if(min == cell) {
                    return 'cell--min'
                } else if(max == cell) {
                    return 'cell--max'
                }
            }
        },
        beforeCreate() {

        },
        created() {

        },
        beforeMount() {

        },
        mounted() {
            // console.log('dataInfo', this.dataInfo)
            // console.log('option', this.option)
        },  
        beforeDestroy() {

        },
    }
</script>
<style lang="scss" scoped>

.compare__table {
    .row-header {
        width: 100%;
        padding: 0 10px;
        background-color: var(--background-color-base);
        display: flex;
        align-items: center;

        .title-icon {
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
        }
    }

    .row-content {
        display: table;
        width: 100%;
    }
}
.compare {

    &__row {
        display: flex;
        width: 100%;

        // &:nth-of-type(even) {
        //     background-color: rgba(var(--background-color-base), .5);
        // }
    }

    &__cell {
        width: inherit;
        padding: 0 15px;
        box-sizing: border-box;
        border-right: solid 1px var(--border-color-base);

        &.cell--title {
            text-align: right;
        }
        &.cell--data {
            text-align: center;
        }
        &:last-child {
            border: 0;
        }
        &.cell--min {
            font-weight: bold;
            color: var(--color-success);
        }
        &.cell--max {
            font-weight: bold;
            color: var(--color-danger);
        }
    }

    &--default {
        .row-header {
            height: 50px;
        }
        .compare__row {
            height: 40px;
            line-height: 40px;
        }
    }
    &--big {
        .row-header {
            height: 55px;
        }
        .compare__row {
            height: 50px;
            line-height: 50px;
        }
    }
}
</style>